<template>
  <div class="container">
    <el-table :data="list" border stripe>
      <!-- 文章 -->
      <el-table-column prop="title" label="文章标题" />
      <el-table-column prop="userName" label="用户名" />
      <el-table-column prop="contactInfo" label="联系信息" />
      <el-table-column prop="errorDescription" label="错误描述" />
      <el-table-column prop="errorType" label="错误类型">
        <template #default="{ row }">
          <el-tag style="margin-right: 5px" type="danger" v-for="value in JSON.parse(row.errorType)" :key="value">{{
            value }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" />
      <el-table-column prop="resolvedAt" label="处理时间" />
      <el-table-column prop="createdAt" label="创建时间" />
      <el-table-column prop="updatedAt" label="更新时间" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary" size="mini" @click="handleEdit(row)">处理</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination v-model:current-page="query.pageNum" v-model:page-size="query.pageSize" :total="total"
        @current-change="getList" @size-change="getList" layout="total, sizes, prev, pager, next"
        :page-sizes="[10, 20, 50, 100]" />
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { getFeedbackCorrectionList, updateFeedbackCorrectionStatus } from '@/api/zhaokao/zhaokao'

const query = ref({
  pageNum: 1,
  pageSize: 10,
})
const list = ref([])
const total = ref(0)

const getList = async () => {
  const res = await getFeedbackCorrectionList(query.value)
  list.value = res.data.records
  total.value = res.data.total
}

getList()
const handleEdit = async (row) => {
  updateFeedbackCorrectionStatus({
    id: row.id,
    status: '已处理',
  }).then((res) => {
    console.log(res);
    if (res.code == 200) {
      ElMessage.success('处理成功');
      getList();
    }
  }).catch(() => {
    ElMessage.error('处理失败');
  });
}
</script>

<style scoped lang="scss">
.container {
  padding: 10px;
  background-color: #f5f7fa;
  min-height: 100vh;

  .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
